<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: #ccc;
            /*表示所有子元素在3D空间中呈现*/
            transform-style: preserve-3D;
            perspective:4000px;
            perspective-origin: 75% 40%;
        }
        img{
            width:350px;
            height:250px;
            position:absolute;
            left:40%;
            top:200px;
            animation-duration:10s;
            animation-iteration-count:10;
            animation-timing-function:linear;
        }
        .img1 {
            transform: rotateY(0deg) translateZ(600px);
            -webkit-animation-name: img-1;
            animation-name: img-1;

        }
        @keyframes img-1 {

            0%{transform: rotateY(0deg) translateZ(600px);}
            11%{transform: rotateY(40deg) translateZ(600px);}
            22%{transform: rotateY(80deg) translateZ(600px);}
            33%{transform: rotateY(120deg) translateZ(600px);}
            44%{transform: rotateY(160deg) translateZ(600px);}
            55%{transform: rotateY(200deg) translateZ(600px);}
            66%{transform: rotateY(240deg) translateZ(600px);}
            77%{transform: rotateY(280deg) translateZ(600px);}
            88%{transform: rotateY(320deg) translateZ(600px);}
            100%{transform: rotateY(360deg) translateZ(600px);}
        }
        .img2 {
            transform: rotateY(40deg) translateZ(600px);
            -webkit-animation-name: img-2;
            animation-name: img-2;
        }
        @keyframes img-2 {
            0%{transform: rotateY(40deg) translateZ(600px);}
            11%{transform: rotateY(80deg) translateZ(600px);}
            22%{transform: rotateY(120deg) translateZ(600px);}
            33%{transform: rotateY(160deg) translateZ(600px);}
            44%{transform: rotateY(200deg) translateZ(600px);}
            55%{transform: rotateY(240deg) translateZ(600px);}
            66%{transform: rotateY(280deg) translateZ(600px);}
            77%{transform: rotateY(320deg) translateZ(600px);}
            88%{transform: rotateY(360deg) translateZ(600px);}
            100%{transform: rotateY(40deg) translateZ(600px);}
        }
        .img3 {
            transform: rotateY(80deg) translateZ(600px);
            -webkit-animation-name: img-3;
            animation-name: img-3;
        }
        @keyframes img-3 {
            0%{transform: rotateY(80deg) translateZ(600px);}
            11%{transform: rotateY(120deg) translateZ(600px);}
            22%{transform: rotateY(160deg) translateZ(600px);}
            33%{transform: rotateY(200deg) translateZ(600px);}
            44%{transform: rotateY(240deg) translateZ(600px);}
            55%{transform: rotateY(280deg) translateZ(600px);}
            66%{transform: rotateY(320deg) translateZ(600px);}
            77%{transform: rotateY(360deg) translateZ(600px);}
            88%{transform: rotateY(40deg) translateZ(600px);}
            100%{transform: rotateY(80deg) translateZ(600px);}
        }
        .img4 {
            transform: rotateY(120deg) translateZ(600px);
            -webkit-animation-name: img-4;
            animation-name: img-4;
        }
        @keyframes img-4 {
            0%{transform: rotateY(120deg) translateZ(600px);}
            11%{transform: rotateY(160deg) translateZ(600px);}
            22%{transform: rotateY(200deg) translateZ(600px);}
            33%{transform: rotateY(240deg) translateZ(600px);}
            44%{transform: rotateY(280deg) translateZ(600px);}
            55%{transform: rotateY(320deg) translateZ(600px);}
            66%{transform: rotateY(360deg) translateZ(600px);}
            77%{transform: rotateY(40deg) translateZ(600px);}
            88%{transform: rotateY(80deg) translateZ(600px);}
            100%{transform: rotateY(120deg) translateZ(600px);}
        }
        .img5 {
            transform: rotateY(160deg) translateZ(600px);
            -webkit-animation-name: img-5;
            animation-name: img-5;
        }
        @keyframes img-5 {
            0%{transform: rotateY(160deg) translateZ(600px);}
            11%{transform: rotateY(200deg) translateZ(600px);}
            22%{transform: rotateY(240deg) translateZ(600px);}
            33%{transform: rotateY(280deg) translateZ(600px);}
            44%{transform: rotateY(320deg) translateZ(600px);}
            55%{transform: rotateY(360deg) translateZ(600px);}
            66%{transform: rotateY(40deg) translateZ(600px);}
            77%{transform: rotateY(80deg) translateZ(600px);}
            88%{transform: rotateY(120deg) translateZ(600px);}
            100%{transform: rotateY(160deg) translateZ(600px);}
        }
        .img6 {
            transform: rotateY(200deg) translateZ(600px);
            -webkit-animation-name: img-6;
            animation-name: img-6;
        }
        @keyframes img-6 {
            0%{transform: rotateY(200deg) translateZ(600px);}
            11%{transform: rotateY(240deg) translateZ(600px);}
            22%{transform: rotateY(280deg) translateZ(600px);}
            33%{transform: rotateY(320deg) translateZ(600px);}
            44%{transform: rotateY(360deg) translateZ(600px);}
            55%{transform: rotateY(40deg) translateZ(600px);}
            66%{transform: rotateY(80deg) translateZ(600px);}
            77%{transform: rotateY(120deg) translateZ(600px);}
            88%{transform: rotateY(160deg) translateZ(600px);}
            100%{transform: rotateY(200deg) translateZ(600px);}
        }
        .img7 {
            transform: rotateY(240deg) translateZ(600px);
            -webkit-animation-name: img-7;
            animation-name: img-7;
        }
        @keyframes img-7 {
            0%{transform: rotateY(240deg) translateZ(600px);}
            11%{transform: rotateY(280deg) translateZ(600px);}
            22%{transform: rotateY(320deg) translateZ(600px);}
            33%{transform: rotateY(360deg) translateZ(600px);}
            44%{transform: rotateY(40deg) translateZ(600px);}
            55%{transform: rotateY(80deg) translateZ(600px);}
            66%{transform: rotateY(120deg) translateZ(600px);}
            77%{transform: rotateY(160deg) translateZ(600px);}
            88%{transform: rotateY(200deg) translateZ(600px);}
            100%{transform: rotateY(240deg) translateZ(600px);}
        }
        .img8 {
            transform: rotateY(280deg) translateZ(600px);
            -webkit-animation-name: img-8;
            animation-name: img-8;
        }
        @keyframes img-8 {
            0%{transform: rotateY(280deg) translateZ(600px);}
            11%{transform: rotateY(320deg) translateZ(600px);}
            22%{transform: rotateY(360deg) translateZ(600px);}
            33%{transform: rotateY(40deg) translateZ(600px);}
            44%{transform: rotateY(80deg) translateZ(600px);}
            55%{transform: rotateY(120deg) translateZ(600px);}
            66%{transform: rotateY(160deg) translateZ(600px);}
            77%{transform: rotateY(200deg) translateZ(600px);}
            88%{transform: rotateY(240deg) translateZ(600px);}
            100%{transform: rotateY(280deg) translateZ(600px);}
        }
        .img9 {
            transform: rotateY(320deg) translateZ(600px);
            -webkit-animation-name: img-9;
            animation-name: img-9;
        }
        @keyframes img-9 {
            0%{transform: rotateY(320deg) translateZ(600px);}
            11%{transform: rotateY(360deg) translateZ(600px);}
            22%{transform: rotateY(40deg) translateZ(600px);}
            33%{transform: rotateY(80deg) translateZ(600px);}
            44%{transform: rotateY(120deg) translateZ(600px);}
            55%{transform: rotateY(160deg) translateZ(600px);}
            66%{transform: rotateY(200deg) translateZ(600px);}
            77%{transform: rotateY(240deg) translateZ(600px);}
            88%{transform: rotateY(280deg) translateZ(600px);}
            100%{transform: rotateY(320deg) translateZ(600px);}
        }
    </style>
</head>
<body>

    <img src="img/3DCarousel_images/1.jpg" alt="" class="img1"/>
    <img src="img/3DCarousel_images/2.jpg" alt="" class="img2"/>
    <img src="img/3DCarousel_images/3.jpg" alt="" class="img3"/>
    <img src="img/3DCarousel_images/4.jpg" alt="" class="img4"/>
    <img src="img/3DCarousel_images/5.jpg" alt="" class="img5"/>
    <img src="img/3DCarousel_images/6.jpg" alt="" class="img6"/>
    <img src="img/3DCarousel_images/7.jpg" alt="" class="img7"/>
    <img src="img/3DCarousel_images/8.jpg" alt="" class="img8"/>
    <img src="img/3DCarousel_images/9.jpg" alt="" class="img9"/>
</body>
</html>